/* eslint-disable jsx-a11y/anchor-is-valid */
import React,{useState,useEffect} from 'react'
import {getList} from "../../api" 
import { Table,Tabs,Space } from 'antd';
import "./style.scss"
import { statusEum } from '../../enum';
import { useNavigate } from 'react-router';
const { TabPane } = Tabs;


export default function Index() {
    const tabs=[
        "全部",
        "进行中",
        "已结束",
    ]
    const [num,setNum]=useState('0')
    const [dataSource,setDataSource]=useState([])
    const callback=(val:string)=> {
        setNum(val)
    }
    const navigate=useNavigate()
    
    const getAndSet=async()=>{
        const resp=await getList({status:num})
        setDataSource(resp.data.data)
    }
    useEffect(()=>{
        getAndSet()
    },[num])
    function toDetail(id:any){
        navigate('/detail',{state:id})
    }

    
    // const [status, setstatus] = useState('')
    interface User {
        key?: string;
        dataIndex?: string;
        title: string;
        render?:any
      }
    //   
    const columns:User[] = [
        {
            title: '试卷信息',
            dataIndex: 'message',
            key: 'message',
        },
        {
            title: '班级',
            dataIndex: 'classfy',
            key: 'classfy',
        },
        {
            title: '创建人',
            dataIndex: 'people',
            key: 'people',
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
        },
        // {
        //     title: '交易状态',
        //     dataIndex: 'status',
        //     key: "status",
        //     render: (status: number) => {
        //         return <div>
        //             {
        //                 statusEum[status]
        //             }
        //         </div>
        //     }
        // },
        {
            title:'操作',
            key:"id",
            render:(id:string)=>{
                return(
                    <Space size="middle">
                    <a onClick={()=>toDetail(id)}>详情</a>
                </Space>
                )
            }
        }
    ];
    return (
        <div className='listWrap'>
            <Tabs defaultActiveKey={num} onChange={callback}>
                {
                    tabs.map((v,i)=>{
                        return(
                            <TabPane tab={v} key={i}/>
                        )
                    })
                }
            </Tabs>
            {
                <Table key='id' style={{width:'100%'}} columns={columns} dataSource={dataSource} />
            }
        </div>
    )
}
